import React from 'react'
import {Card,Form,Input,Button,message} from 'antd'
import '@/assets/login.scss'
import {UserOutlined,ShoppingOutlined} from '@ant-design/icons'
import {LoginType} from '@/types/userType'
import api from '@/api'
import * as store from '@/utils/storage'
import withRouer from '@/utils/withRouter'
function Login(props:any) {
  const login=async(arg:LoginType)=>{
    const result=await api.users.loginApi(arg)
    console.log('result',result.data);
    if(result.data.message==="认证成功"){
      message.success("登录成功")
      //保存token到localStorage
      store.saveStorage("token",result.data.token)
      props.navigate("/home")
    }

    
  }
  return (
    <div className='container'>
      <Card className='login-container'>
        <Form onFinish={login}>
            <Form.Item name="username">
                <Input prefix={<UserOutlined/>}></Input>
            </Form.Item>
            <Form.Item name="password">
                <Input.Password prefix={<ShoppingOutlined/>}></Input.Password>
            </Form.Item>
            <Form.Item>
              <Button className="login-btn" type='primary' htmlType='submit'>登录</Button>
            </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default withRouer(Login)
